<template>
  <div class="app-container" :class="$style.wrapper">
    <!-- 基础表单信息 -->
    <el-card header="基础信息" style="width: 100%">
      <div slot="header" class="clearfix">
        <span>基础信息</span>

        <el-button
          v-hasPermi="[modulePermi + ':edit']"
          type="primary"
          v-if="readOnly"
          plain
          icon="el-icon-edit"
          size="mini"
          style="float: right; margin: 0px 10px"
          @click="readOnly = false"
        >
          编 辑
        </el-button>
        <el-button
          v-if="!readOnly"
          icon="el-icon-check"
          size="mini"
          style="float: right; margin: 0px 10px"
          @click="submitForm(2)"
          v-hasPermi="[modulePermi + ':submit']"
        >
          录入完成
        </el-button>
        <el-button
          type="primary"
          v-if="!readOnly"
          icon="el-icon-save"
          size="mini"
          style="float: right; margin: 0px 10px"
          @click="submitForm(1)"
          v-hasPermi="[modulePermi + ':save']"
        >
          保 存
        </el-button>
      </div>
      <div>
        <!-- 工序方案 -->
        <el-form
          ref="formMain"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="form-con"
          :disabled="readOnly"
        >
          <el-col :span="6">
            <el-form-item label="客户" prop="jzmName">
              <el-input
                :value="getDictLabel(form.jzmName, customerOptions)"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="机型" prop="itmMstrJzdm">
              <HdSearchInput
                v-model="form.itmMstrJzdm"
                style="width: auto"
                keyName="jzmJzdm"
                modulePath="project/jzmMstr"
                @change="
                  (value) => {
                    handleChangeJzdm(value);
                  }
                "
                placeholder="请选择机种代码"
              ></HdSearchInput>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年预估量" prop="annualEstimate">
              <el-input-number
                style="width: 100%"
                :controls="false"
                v-model="form.annualEstimate"
                placeholder="年预估量"
                :disabled="edit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计导入日期" prop=" estimatedImportDate">
              <el-date-picker
                v-model="form.estimatedImportDate"
                clearable
                value-format="yyyy-MM-dd"
                type="date"
                range-separator="-"
                placeholder="请选择预计导入日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="使用设备及工艺" prop="equipmentList">
              <el-checkbox-group v-model="form.equipmentList">
                <el-checkbox
                  v-for="item in $store.state.dicts.rd_technology"
                  :label="item.dictLabel"
                ></el-checkbox>
              </el-checkbox-group>
              <el-input
                placeholder="请输入其他使用设备及工艺"
                v-show="form.equipmentList.includes('其他')"
                v-model="form.equipmentOther"
              />
            </el-form-item>
          </el-col>
          <div style="clear: both"></div>
        </el-form>
        <div style="clear: both"></div>
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane
            label="BOM明细"
            name="first"
            @keyup.enter.stop.native="addBom"
          >
            <el-row :gutter="10" class="mb8" style="margin-top: 10px">
              <el-col :span="24" style="text-align: right" v-if="!readOnly">
                <span style="padding-left: 10px">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="addBom()"
                    >新增BOM明细</el-button
                  >
                </span>
                <span style="padding-left: 10px"></span>
              </el-col>
            </el-row>
            <ux-grid
              ref="plxTableBom"
              widthResize
              :highlightCurrentRow="false"
              :treeConfig="{
                expandAll: true,
                indent: 5,
              }"
              :default-expand-all="true"
              :edit-config="{
                trigger: 'click',
                mode: 'cell',
                showIcon: !readOnly,
                activeMethod: ({ row }) => {
                  return (!row.bomLevel || row.bomLevel == 0) && !readOnly;
                },
              }"
              height="450px"
              border
              :data="form.productItmCustwldmList"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <!-- <ux-table-column title="#" align="center" type="index" width="40"></ux-table-column> -->
              <ux-table-column
                title="BOM阶层"
                align="center"
                field="bomLevel"
                width="100"
                :tree-node="true"
              ></ux-table-column>
              <ux-table-column
                title="客户编码"
                align="center"
                field="itmCustwldm"
                width="150"
                :edit-render="editRender"
              >
                <template v-slot:edit="{ row }">
                  <HdSearchInput
                    v-model="row.itmCustwldm"
                    keyName="itmCustwldm"
                    modulePath="project/bom"
                    @change="
                      (value) => {
                        handleChangeProduct(value, row);
                      }
                    "
                    placeholder="客户代码"
                  ></HdSearchInput>
                </template>
              </ux-table-column>
              <ux-table-column
                title="物料代码"
                align="center"
                field="itmWldm"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                title="产品名称"
                align="center"
                field="itmPmgg"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                title="采购属性"
                align="center"
                field="bodCgsx"
                min-width="90px"
                resizable
                show-overflow
              >
                <template #default="scope">
                  <dict-tag
                    :options="bomCgsxOptions"
                    :value="scope.row.bodCgsx"
                  />
                </template>
              </ux-table-column>
              <ux-table-column
                title="单位"
                align="center"
                field="itmDw"
                width="150px"
              >
                <template v-slot="scope">
                  <dict-tag
                    :options="$store.state.dicts.sys_unit"
                    :value="scope.row.itmDw"
                  />
                </template>
              </ux-table-column>
              <ux-table-column
                title="材质"
                align="center"
                field="itmCzdm"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                title="颜色"
                align="center"
                field="itmStandardColor"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                title="净重"
                align="center"
                field="itmJz"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                title="尺寸"
                align="center"
                field="itmCcms"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                title="用量"
                align="center"
                field="bodDwyl"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                v-if="!readOnly"
                title="操作"
                width="80"
                fixed="right"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template
                  #default="scope"
                  v-if="!scope.row.bomLevel || scope.row.bomLevel == 0"
                >
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    @click="deleteEventBom(scope.row, scope.rowIndex)"
                    v-hasPermi="[modulePermi + ':remove']"
                  >
                    删除
                  </el-button>
                </template>
              </ux-table-column>
            </ux-grid>
          </el-tab-pane>
          <el-tab-pane
            label="自开模具"
            name="sec"
            @keyup.enter.stop.native="addMod"
          >
            <el-row :gutter="10" class="mb8" style="margin-top: 10px">
              <el-col :span="24" style="text-align: right" v-if="!readOnly">
                <span style="padding-left: 10px">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="addMod()"
                    >新增</el-button
                  >
                </span>
                <span style="padding-left: 10px"></span>
              </el-col>
            </el-row>
            <ux-grid
              ref="plxTableBom"
              widthResize
              :highlightCurrentRow="false"
              height="450px"
              border
              :edit-config="{
                trigger: 'click',
                mode: 'row',
                showIcon: !readOnly,
                activeMethod: ({ row }) => {
                  return !readOnly;
                },
              }"
              :data="form.makeMoldList"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <ux-table-column
                title="#"
                align="center"
                type="index"
                width="40"
              ></ux-table-column>
              <ux-table-column
                title="客户编码"
                align="center"
                field="itmCustwldm"
                width="150"
                :edit-render="editRender"
              >
                <template v-slot:edit="{ row }">
                  <HdSearchInput
                    v-model="row.itmCustwldm"
                    keyName="itmCustwldm"
                    :options="bomOptions"
                    modulePath="project/bom"
                    @change="
                      (value) => {
                        handleChangeProduct2(value, row);
                      }
                    "
                    placeholder="客户代码"
                  ></HdSearchInput>
                </template>
              </ux-table-column>
              <ux-table-column
                title="系统编码"
                align="center"
                field="itmWldm"
                min-width="90px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                title="产品名称"
                align="center"
                field="itmPmgg"
                min-width="190px"
                resizable
                show-overflow
              ></ux-table-column>
              <ux-table-column
                align="center"
                field="tonnage"
                min-width="90px"
                resizable
                show-overflow
                :edit-render="editRender"
              >
                <template #header>
                  <span class="required">吨位</span>
                </template>
                <template v-slot:edit="{ row }">
                  <el-input
                    v-model="row.tonnage"
                    type="number"
                    placeholder="请输入吨位"
                    style="width: 100%"
                  ></el-input>
                </template>
              </ux-table-column>
              <ux-table-column
                align="center"
                field="vacity"
                min-width="90px"
                resizable
                show-overflow
                :edit-render="editRender"
              >
                <template #header>
                  <span class="required">穴数</span>
                </template>
                <template v-slot:edit="{ row }">
                  <el-input
                    v-model="row.vacity"
                    type="number"
                    placeholder="请输入穴数"
                    style="width: 100%"
                  ></el-input>
                </template>
              </ux-table-column>
              <ux-table-column
                v-if="!readOnly"
                title="操作"
                width="80"
                fixed="right"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    @click="deleteEventMod(scope.row, scope.rowIndex)"
                    v-hasPermi="[modulePermi + ':remove']"
                  >
                    删除
                  </el-button>
                </template>
              </ux-table-column>
            </ux-grid>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixins from "@/mixins/common";
import { addBom, bomTree } from "@/api/project/bom";
import RdmoduleService from "@/api/rdmodule/rdmodule";
import uniqBy from "lodash/uniqBy";

export default {
  name: "NewProduct",
  mixins: [mixins.customerOptions, mixins.bomCgsxOptions],
  props: {
    id: {
      type: String,
      default: "",
    },
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      modulePermi: "rdmodule:NewProduct",
      activeName: "first",
      readOnly: false,
      form: {
        processPrograms: [],
        productItmCustwldmList: [],
        equipmentList: [],
        makeMoldList: [],
      },
      rules: {
        itmMstrJzdm: [{ required: true, message: "请选择机型" }],
        equipmentList: [{ required: true, message: "请选择使用设备工艺" }],
      },
      rulesBom: {},
      rulesPro: {},
      rulesProcess: {
        processName: [{ required: true, message: "请输入工序" }],
        processType: [{ required: true, message: "请选择工序类型" }],
      },
      processPrograms: [],
      tableDataChild: {
        height: 0,
        rows: [],
        loading: false,
        total: 0,
        open: false,
        form: {},
        selection: [],
        rules: {},
        queryParams: {
          pageNum: 1,
          pageSize: 9999,
        },
      },
      edit: false,
      tableDataChild2: {
        height: 0,
        rows: [],
        loading: false,
        total: 0,
        open: false,
        form: {},
        selection: [],
        rules: {},
        queryParams: {
          pageNum: 1,
          pageSize: 9999,
        },
      },
      editRender: { autofocus: ".el-input__inner" },
    };
  },
  created() {
    this.$store.dispatch("GetDict", "rd_technology");
    this.$store.dispatch("GetDict", "sys_unit");
    this.$bus.$on("query-NewProductDiagram", (a) => {
      this.form.itmMstrJzdm = a;
      RdmoduleService.getInfo(a).then((res) => {
        this.form = res.data;
        this.$nextTick(() => {
          Object.assign(this.form, res.data);
        });
      });
    });
  },
  beforeDestroy() {
    this.$bus.$off("query-NewProductDiagram");
  },
  computed: {
    bomOptions() {
      const op = [];
      const dx = (arr) => {
        arr.forEach((v) => {
          if (v.itmCustwldm) {
            op.push(v);
          }
          if (v.children && v.children.length > 0) {
            dx(v.children);
          }
        });
      };
      dx(this.form.productItmCustwldmList);
      return uniqBy(op, "itmCustwldm");
    },
  },
  methods: {
    /** 提交按钮 */
    submitForm(state) {
      this.$refs["formMain"].validate((valid) => {
        if (valid) {
          if (
            this.form.equipmentList.includes("其他") &&
            state == 2 &&
            this.form.equipmentOther == null
          ) {
            this.msgError("请填写其他使用设备及工艺");
            return;
          }
          this.form.researchPhase = "1";
          this.form.researchStatus = state;
          this.form.engineer = this.$store.state.user.nickName;
          RdmoduleService.add(this.form).then((res) => {
            this.msgSuccess("保存成功");
            //this.goBack()
          });
        }
      });
    },
    handleChangeJzdm(v) {
      this.form.jzmName = v.jzmCusId;
      this.form.jzmId = v.jzmId;
      RdmoduleService.getInfo(v.jzmJzdm).then((res) => {
        this.form = res.data;
        this.$nextTick(() => {
          Object.assign(this.form, res.data);
        });
      });
    },
    addBom(a) {
      if (this.readOnly) return;
      let defaultBom = {
        productCode: this.form.productCode,
        hierarchy: "0",
        children: [],
      };
      this.form.productItmCustwldmList.push(defaultBom);
      //this.solutionCur = 'solution' + idx
      //this.$refs.plxTableBom.doLayout()
    },
    deleteEventBom(row, rowIndex) {
      this.form.productItmCustwldmList.splice(rowIndex, 1);
    },
    addMod(a) {
      if (this.readOnly) return;
      let defaultBom = {
        productCode: this.form.productCode,
        tonnage: "",
        vacity: "",
      };
      this.form.makeMoldList.push(defaultBom);
    },
    deleteEventMod(row, rowIndex) {
      this.form.makeMoldList.splice(rowIndex, 1);
    },
    handleChangeProduct(params, row) {
      row.itmCustwldm = params.itmCustwldm;
      bomTree(params.itmCustwldm).then((res) => {
        if (res.code === 200) {
          Object.assign(row, res.data);
        }
      });
    },
    handleChangeProduct2(params, row) {
      row.itmCustwldm = params.itmCustwldm;
      row.itmWldm = params.itmWldm;
      row.itmPmgg = params.itmPmgg;
    },
  },
};
</script>

<style module lang="scss">
.wrapper {
  :global {
    .el-form-itemxx {
      margin-bottom: 10px;
    }
    .el-checkbox {
      display: inline-table;
      width: 100px;
    }
  }
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .item {
    sup {
      top: 6px;
      right: 42px;
    }
  }
}
</style>
